<template>
  <div class="energy_consume">
    <px-card class="content-left">
      <div class="tree-tab">
        <div :class="['tree-tab-item', { 'active-tab': treeTab === '厂务侧' }]" @click="changeTab('厂务侧')">厂务侧</div>
        <div :class="['tree-tab-item', { 'active-tab': treeTab === '机台侧' }]" @click="changeTab('机台侧')">机台侧</div>
        <div :class="['tree-tab-item', { 'active-tab': treeTab === '其他侧' }]" @click="changeTab('其他侧')">其他侧</div>
      </div>
      <div class="tree-title">{{ treeTab === "厂务侧" ? "厂务系统" : treeTab }}</div>
      <div class="tree-search">
        <px-input v-model="treeSearchVal" placeholder="请输入" :prefix-icon="Search" />
      </div>
      <div class="tree-bar">
        <px-scrollbar>
          <px-tree
            ref="treeRef"
            :data="treeData"
            node-key="id"
            default-expand-all
            highlight-current
            :current-node-key="currentNode"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="handleNodeClickTwo"
          >
            <template #default="{ data }">
              <px-tooltip :content="data.label" placement="top" :show-after="showAfter">
                <span>
                  {{ data.label }}
                </span>
              </px-tooltip>
            </template>
          </px-tree>
        </px-scrollbar>
      </div>
    </px-card>
    <div class="content-right">
      <div class="top_query">
        <px-form ref="queryRef" class="custom-form-ui inspection-form" :model="queryParams" :inline="true" label-width="100px">
          <px-form-item label="时间维度" prop="dataFormat" style="width: 340px">
            <px-radio-group v-model="queryParams.queryTimeGranularity" style="margin-left: 10px" @change="handleChangeFn">
              <!-- <px-radio size="small" label="Hourly">小时</px-radio> -->
              <px-radio size="small" label="Daily">日</px-radio>
              <px-radio size="small" label="Monthly">月</px-radio>
              <px-radio size="small" label="Yearly">年</px-radio>
            </px-radio-group>
          </px-form-item>
          <px-form-item label="时间范围" style="width: 380px">
            <!-- <px-time-picker
            v-if="queryParams.queryTimeGranularity === 'Hourly'"
            v-model="dateRange"
            is-range
            range-separator="-"
            format="HH"
            value-format="HH"
            start-placeholder="开始小时"
            end-placeholder="结束小时"
          /> -->
            <px-date-picker
              v-if="queryParams.queryTimeGranularity === 'Daily'"
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
              @change="changeFnDay"
            />
            <px-date-picker
              v-if="queryParams.queryTimeGranularity === 'Monthly'"
              v-model="dateRange"
              type="monthrange"
              value-format="YYYY-MM"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :clearable="false"
              @change="changeFnMonth"
            />
            <!-- <div v-else-if="queryParams.queryTimeGranularity === 'Yearly'" class="select_year">
            <px-date-picker v-model="queryParams.startTime" value-format="YYYY" type="year" placeholder="开始年份" />
            <span>&nbsp;-&nbsp;</span>
            <px-date-picker v-model="queryParams.endTime" value-format="YYYY" type="year" placeholder="结束年份" />
          </div> -->
            <div v-if="queryParams.queryTimeGranularity === 'Yearly'">
              <yearPicker
                ref="statisticPicker"
                :labelWidth="0"
                labelText=""
                :clearable="false"
                :initYear="dateValue"
                @updateTimeRange="updateStatisticYear"
              />
            </div>
          </px-form-item>
          <px-form-item label="厂区">
            <!-- <px-select v-model="queryParams.level" clearable placeholder="请选择层级">
            <px-option v-for="item in classNameArr" :key="item.value" :label="item.label" :value="item.value" />
          </px-select> -->
            <px-select v-model="queryParams.factory" :clearable="false" placeholder="请选择层级" @change="changeFactory">
              <px-option v-for="item in systemList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
          <px-button type="primary" icon="" @click="handleQuery">搜索</px-button>
          <px-button icon="" @click="resetQuery">重置</px-button>
        </px-form>
      </div>
      <!-- 根节点 自定义表格 -->
      <!-- <div v-if="['fac', 'equip', 'other'].includes(currentNode) || currentNodeLevel === '厂务侧2'" class="content">
        <switchTableTabs :key="currentNode + switchTableTabsKey" :currentNode="currentNode" :queryParams="queryParams" />
      </div> -->
      <div v-if="showContent === '1'" class="content">
        <switchTableTabs :key="currentNode + switchTableTabsKey" :currentNode="currentNode" :queryParams="queryParams" />
      </div>
      <template v-if="showContent === '2'">
        <div v-if="currentNode && currentNode != '0'" class="content">
          <px-button class="children-download" @click="handleDown">
            导出<px-icon class="px-icon--right">
              <Download />
            </px-icon>
          </px-button>
          <div v-if="timeType === 'Hourly'" class="ffu_total">
            <iframe
              id="preivewFrame"
              class="iframe-con"
              scrolling="no"
              :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&sysId=${currentNode}&factory=${queryParams.factory}`"
              frameborder="0"
            />
          </div>
          <div v-if="timeType === 'Daily'" class="ffu_total">
            <iframe
              id="preivewFrame"
              class="iframe-con"
              scrolling="no"
              :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&sysId=${currentNode}&factory=${queryParams.factory}`"
              frameborder="0"
            />
          </div>
          <div v-if="timeType === 'Monthly'" class="ffu_total">
            <iframe
              id="preivewFrame"
              class="iframe-con"
              scrolling="no"
              :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&sysId=${currentNode}&factory=${queryParams.factory}`"
              frameborder="0"
            />
          </div>
          <div v-if="timeType === 'Yearly'" class="ffu_total">
            <iframe
              id="preivewFrame"
              class="iframe-con"
              scrolling="no"
              :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&sysId=${currentNode}&factory=${queryParams.factory}`"
              frameborder="0"
            />
          </div>
        </div>
      </template>
      <template v-if="showContent === '3'">
        <div class="no-content">暂无数据</div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, nextTick, computed, onUnmounted, reactive, toRefs, watch } from "vue";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import switchTableTabs from "./switchTableTabs/index.vue";
import { queryDictData } from "@/api/common";
import { PxMessage } from "px-ui";
import { Search } from "@px-ui/icons-vue";
import axios from "axios";
import { Download } from "@px-ui/icons-vue";

defineOptions({
  name: "ALL_ENERGY_CONSUME_MEASUREMENT"
});

const { VITE_FANRUAN_BASE_URL } = import.meta.env;
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)];
const isLeaf = ref(false);
const templateName = computed(() => {
  switch (timeType.value) {
    case "Hourly":
      return encodeURIComponent(encodeURIComponent(isLeaf.value ? "consumeMeasurementSystemHourly" : "consumeMeasurementHourly")) + ".fvs";
      break;
    case "Daily":
      return encodeURIComponent(encodeURIComponent(isLeaf.value ? "consumeMeasurementSystemDaily" : "consumeMeasurementDaily")) + ".fvs";
      break;
    case "Monthly":
      return encodeURIComponent(encodeURIComponent(isLeaf.value ? "consumeMeasurementSystemMonthly" : "consumeMeasurementMonthly")) + ".fvs";
      break;
    case "Yearly":
      return encodeURIComponent(encodeURIComponent(isLeaf.value ? "consumeMeasurementSystemYearly" : "consumeMeasurementYearly")) + ".fvs";
      break;
    default:
      return encodeURIComponent(encodeURIComponent(isLeaf.value ? "consumeMeasurementSystemMonthly" : "consumeMeasurementMonthly")) + ".fvs";
      break;
  }
});
const { proxy } = getCurrentInstance();

const treeTab = ref("厂务侧");
const yearStart = ref("");
const yearEnd = ref("");
const switchTableTabsKey = ref(new Date().getTime());
// 可选择区间，initYear传参，不传则所有年份有效，小于0判断一下？
const dateValue = ref({
  startYear: `${new Date().getFullYear() - 2}`,
  endYear: `${new Date().getFullYear()}`
});

const systemList = ref([]);
const showContent = ref("1"); // 1: 前端写的组件，2：帆软，3：暂无数据
const state = reactive({
  treeSearchVal: "",
  treeData: [],
  currentNode: "0",
  currentNodeLevel: null, // 厂务侧科室标志
  showAfter: 2000
});
const { treeSearchVal, treeData, currentNode, currentNodeLevel, showAfter } = toRefs(state);

const treeRef = ref();
watch(
  () => state.treeSearchVal,
  val => {
    treeRef.value.filter(val);
  }
);

const changeTab = tab => {
  treeTab.value = tab;
  getTreeData();
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

// 获取树节点数据
const getTreeData = () => {
  let url = "";
  if (treeTab.value === "厂务侧") {
    url = "/models/treeData.json";
  } else if (treeTab.value === "机台侧") {
    url = "/models/equip.json";
  } else if (treeTab.value === "其他侧") {
    url = "/models/others.json";
  }
  axios
    .get(url)
    .then(res => {
      const data = res.data.data;
      state.treeData = data;
      nextTick(() => {
        // const firstLeaf = getFirstLeaf(data[0]);
        state.currentNode = data[0].id;
        treeRef.value.setCurrentKey([data[0].id]);
        showContent.value = "1";
      });
    })
    .catch(error => {
      console.log(error);
    });
};

// 获取第一个叶子节点
const getFirstLeaf = node => {
  if (node.children.length === 0) {
    return node;
  }
  for (let i = 0; i < node.children.length; i++) {
    const firstLeaf = getFirstLeaf(node.children[i]);
    if (firstLeaf) {
      return firstLeaf;
    }
  }
  return null;
};

// 点击树节点
const handleNodeClick = (data, node, obj) => {
  if (node.level !== 1 && data.children.length > 0) {
    node.isCurrent = false;
    nextTick(() => {
      treeRef.value.setCurrentKey([state.currentNode]);
    });
    //  厂务系统 特殊处理，下面的科室可以点击查询数据, 科室不固定，因此动态处理是点击二级的科室
    if (treeTab.value === "厂务侧" && node.level == 2) {
      isLeaf.value = node.isLeaf;
      state.currentNode = data.id || encodeURIComponent(data.label);
      state.currentNodeLevel = treeTab.value + node.level;
    } else {
      state.currentNodeLevel = null;
    }
    // 厂务系统，三级的废水系统支持跳转
    if (treeTab.value === "厂务侧" && node.level == 3 && data.id === "feishui") {
      isLeaf.value = node.isLeaf;
      state.currentNode = data.id || encodeURIComponent(data.label);
      state.currentNodeLevel = treeTab.value + node.level;
    }
  } else {
    isLeaf.value = node.isLeaf;
    state.currentNode = data.id || encodeURIComponent(data.label);
    state.currentNodeLevel = null;
  }
  console.log("currentNodeLevel", state.currentNodeLevel);
};

// 新的处理方法
const handleNodeClickTwo = (data, node, obj) => {
  // 厂务侧,叶子节点用帆软，其他节点用前端写的组件
  if (treeTab.value === "厂务侧") {
    // 叶子节点
    if (data.children.length === 0) {
      showContent.value = "2";
    } else {
      showContent.value = "1";
    }
    isLeaf.value = node.isLeaf;
    state.currentNode = data.id || encodeURIComponent(data.label);
    state.currentNodeLevel = treeTab.value + node.level;
  }
  // 机台侧，
  // 叶子节点不显示右侧的内容，
  // 其他节点用前端写的组件
  if (treeTab.value === "机台侧") {
    // 叶子节点
    if (data.children.length === 0) {
      showContent.value = "3";
    } else {
      showContent.value = "1";
    }
    isLeaf.value = node.isLeaf;
    state.currentNode = data.id || encodeURIComponent(data.label);
    state.currentNodeLevel = treeTab.value + node.level;
  }
  // 其他侧，
  // 叶子节点不显示右侧的内容,
  // 其他节点用前端写的组件
  if (treeTab.value === "其他侧") {
    // 叶子节点不显示右侧的内容
    if (data.children.length === 0) {
      showContent.value = "3";
    } else {
      showContent.value = "1";
    }
    isLeaf.value = node.isLeaf;
    state.currentNode = data.id || encodeURIComponent(data.label);
    state.currentNodeLevel = treeTab.value + node.level;
  }
};

// 获取当天时间
const getNowDate = s => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const str = s === "start" ? "00:00:00" : "23:59:59";
  return `${year}-${month}-${day} ${str}`;
};

// 定义数据
const dateRange = ref([]);

const queryParams = ref({
  queryTimeGranularity: "Monthly",
  factory: ""
});

// 获取当月第一天
const getCurrentMonthF = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  let d = "01";
  m = m < 10 ? "0" + m : m;
  return [y, m, d].join("-");
};

// 获取当月最后一天
const getCurrentMonthL = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  let d = new Date(y, m, 0).getDate();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  return [y, m, d].join("-");
};

// 校验时间范围不为空
const checkDate = () => {
  if (queryParams.value.queryTimeGranularity) {
    if (dateRange.value && dateRange.value.length) {
      return true;
    }
    if (queryParams.value.startTime && queryParams.value.endTime) {
      return true;
    }
  }
};

const isSerch = ref(false);

// 获取某月最后一天
const getMonthLastDay = (y, m) => {
  let date = new Date(y, m - 1, "01");
  date.setDate(1);
  date.setMonth(date.getMonth() + 1);
  let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
  return cdate.getDate();
};

const timeType = ref("Monthly");
const factoryName = ref("");
/** 搜索按钮操作 */
function handleQuery() {
  timeType.value = queryParams.value.queryTimeGranularity;
  factoryName.value = queryParams.value.factory;
  if (!queryParams.value.factory) {
    console.log("没有厂区");
    return;
  }
  if (queryParams.value.queryTimeGranularity === "Daily") {
    queryParams.value.startTime = dateRange.value[0] + " 00:00:00";
    queryParams.value.endTime = dateRange.value[1] + " 23:59:59";
    // queryParams.value.startTime =
    //   queryParams.value.startTime.indexOf("00") != -1 ? queryParams.value.startTime : queryParams.value.startTime + " 00:00:00";
    // queryParams.value.endTime = queryParams.value.endTime.indexOf("59") != -1 ? queryParams.value.endTime : queryParams.value.endTime + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Monthly") {
    queryParams.value.startTime = dateRange.value[0].indexOf("00") != -1 ? dateRange.value[0] : dateRange.value[0] + "-01 00:00:00";
    const d = getMonthLastDay(Number(dateRange.value[1].split("-")[0]), Number(dateRange.value[1].split("-")[1]));
    queryParams.value.endTime = dateRange.value[1].indexOf("59") != -1 ? dateRange.value[1] : dateRange.value[1] + "-" + d + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Hourly") {
    //获取新的时间
    let date = new Date();
    //获取当前时间的年份转为字符串
    let year = date.getFullYear().toString();
    //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
    //获取天，判断是否小于10，如果是在字符串前面拼接'0'
    let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
    queryParams.value.startTime = `${year}-${month}-${da} ${dateRange.value[0]}:00:00`;
    queryParams.value.endTime = `${year}-${month}-${da} ${dateRange.value[1]}:59:59`;
  } else {
    queryParams.value.startTime = yearStart.value;
    queryParams.value.endTime = yearEnd.value;
  }
  switchTableTabsKey.value = new Date().getTime(); // 刷新组件
  proxy.$refs["queryRef"].validate(valid => {
    if (!valid) return;
    if (queryParams.value.queryTimeGranularity) {
      if (!checkDate()) {
        return PxMessage({
          type: "warning",
          message: "时间范围不能为空"
        });
      }
      // activeTime.value = queryParams.value.queryTimeGranularity;
      // midKey.value = Date.now();
      // isSerch.value = !isSerch.value;
    } else {
      // midKey.value = Date.now();
      // isSerch.value = !isSerch.value;
    }
  });
}
const handleChangeFn = val => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  switch (val) {
    case "Hourly":
      dateRange.value = ["00", "23"];
      break;
    case "Daily":
      dateRange.value = [getCurrentMonthF(), getCurrentMonthL()];
      // queryParams.value.startTime = getCurrentMonthF() + " 00:00:00";
      // queryParams.value.endTime = getCurrentMonthL() + " 23:59:59";
      break;
    case "Monthly":
      dateRange.value = [`${year}-${month}`, `${year}-${month}`];
      // queryParams.value.startTime = dateRange.value[0] + "-01 00:00:00";
      // queryParams.value.endTime = dateRange.value[1] + "-31 23:59:59";
      break;
    case "Yearly":
      // let yearS = new Date().getFullYear() - 3;
      let yearE = new Date().getFullYear();
      yearStart.value = `${yearE - 2}-01-01 00:00:00`;
      yearEnd.value = `${yearE}-12-31 23:59:59`;
      break;
    default:
      break;
  }
  // 刷新页面
  handleQuery();
};
/** 重置按钮操作 */
function resetQuery() {
  initQuery();
  // 默认执行一下
  handleQuery();
}
const changeFnDay = val => {
  // console.log(val);
  // if (val) {
  //   queryParams.value.startTime = val[0];
  //   queryParams.value.endTime = val[1];
  // }
  // 刷新页面
  handleQuery();
};
const changeFnMonth = val => {
  // console.log(val);
  // if (val) {
  //   queryParams.value.startTime = val[0];
  //   queryParams.value.endTime = val[1];
  // }
  // 刷新页面
  handleQuery();
};
const changeFactory = val => {
  // 刷新页面
  handleQuery();
};
// const dateValue = ref({});
// 选完/输入完成的回调
const updateStatisticYear = (startYear, endYear) => {
  console.log(startYear, endYear);
  dateRange.value = [startYear ? startYear.toString() : "", endYear ? endYear.toString() : ""];
  yearStart.value = `${startYear}-01-01 00:00:00`;
  yearEnd.value = `${endYear}-12-31 23:59:59`;
  // 刷新页面
  handleQuery();
};
// 反转数组
const reverseArray = arr => {
  let newArr = [];
  arr.forEach(item => {
    newArr.unshift(item);
  });
  return newArr;
};

// 限制日期区间
let start_time = 0;
// 清除开始时间
const visibleChange = val => {
  start_time = 0;
};
// 根据开始时间禁用结束时间
const calendarChange = ([start]) => {
  start_time = start.getTime();
};
// 范围为31天
const time_scope_day = 24 * 60 * 60 * 1000 * 31 - 1;

const disabledDateFn = time => {
  const is_disabled = start_time ? time.getTime() < start_time - time_scope_day || time.getTime() > start_time + time_scope_day : false;
  return time.getTime() > Date.now() || is_disabled;
};

// 默认查询条件
const initQuery = () => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m = date.getMonth() + 1; // 获取月
  queryParams.value.queryTimeGranularity = "Monthly";
  timeType.value = "Monthly";
  dateRange.value = [`${year}-${month}`, `${year}-${month}`];
  queryParams.value.startTime = getCurrentMonthF() + " 00:00:00";
  queryParams.value.endTime = getCurrentMonthL() + " 23:59:59";
};
/** 导出按钮操作 */
const handleDown = async val => {
  let dimension = queryParams.value.queryTimeGranularity;
  if (dimension == "Hourly") {
    dimension = "HOUR";
  }
  if (dimension == "Daily") {
    dimension = "DAY";
  }
  if (dimension == "Monthly") {
    dimension = "MONTH";
  }
  if (dimension == "Yearly") {
    dimension = "YEAR";
  }
  proxy.download(
    "post",
    "/energy/consumeMeasure/exportIndicators",
    {
      dimension,
      startDate: queryParams.value.startTime,
      endDate: queryParams.value.endTime,
      factory: queryParams.value.factory,
      sysId: state.currentNode
    },
    `消耗计量-${treeTab.value}子系统指标.xlsx`
  );
};
// onBeforeMount(async () => {
//   systemList.value = await queryDictData({ typeCode: "factoryArea" });
//   queryParams.value.factory = systemList.value[0].value;
//   getTreeData();
// });
onMounted(async () => {
  let arr = await queryDictData({ typeCode: "factoryArea" });
  systemList.value = arr;
  queryParams.value.factory = arr[0].value;
  getTreeData();
  initQuery();
});
// onMounted(() => {
// const year = new Date().getFullYear();
// dateRange.value = [`${year}-01`, `${year}-12`];
// queryParams.value.startTime = dateRange.value[0] + "-01 00:00:00";
// queryParams.value.endTime = dateRange.value[1] + "-31 23:59:59";
// timeType.value = "Yearly";
// initQuery();
// });
</script>

<style lang="scss" scoped>
.energy_consume {
  box-sizing: border-box;
  display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
  align-items: center;

  .top_turnback {
    margin-bottom: 16px;
  }

  .top_query {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100%;
    // min-width: 1300px;
    height: auto;
    padding: 16px 24px;
    margin-bottom: 16px;
    line-height: 44px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);

    .query_top {
      display: flex;

      /*
      * tab样式
      */
      .tabSwitch {
        min-width: 200px;
        padding: 0 5px;
        margin-right: 20px;
        background-color: #f4f4f4;
        border-radius: 4px;

        :deep(.px-radio-button__inner) {
          background-color: #f4f4f4;
          border: none;
        }

        :deep(.is-active) {
          border: none;

          .px-radio-button__inner {
            background-color: var(--px-color-primary);
            border-radius: 4px;
          }
        }
      }
    }

    .select_year {
      display: flex;
      align-items: center;
      justify-content: left;
      margin-right: 20px;
    }

    .px-form-item {
      margin-bottom: 0;
    }
  }

  .con_top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // min-width: 1300px;
    height: 360px;
    margin-bottom: 16px;

    .con_top_item:nth-child(1) {
      width: 33%;
      margin-right: 16px;
    }

    .con_top_item:nth-child(2) {
      width: 67%;
    }
  }

  .con_bot {
    width: 100%;
    // min-width: 1300px;
  }

  .ffu_total {
    width: 100%;
    height: 100%;
    // background-color: #fff;

    .iframe-con {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden !important;
      border: 0;
    }
  }

  .content {
    position: relative;
    // display: flex;
    // align-items: center;
    width: 100%;
    height: calc(100vh - 220px);
    overflow-y: auto;

    .children-download {
      position: absolute;
      top: 0;
      right: 20px;
    }
  }
}

.content-left {
  flex-shrink: 0;
  width: 310px;
  height: 100%;
  // border-radius: 4px;
  // border: 1px solid #dfdfdf;
  background: #fff;

  .tree-title {
    padding: 8px 8px 0;
    font-size: 14px;
    font-weight: bold;
  }

  .tree-search {
    padding: 8px;
  }

  .tree-bar {
    width: 100%;
    height: calc(100vh - 310px);
    overflow-y: auto;
  }
}

.content-right {
  flex: 1;
  height: 100%;
  padding-left: 16px;
}

.tree-tab {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 196px;
  height: 44px;
  margin-bottom: 24px;
  background: #f4f4f4;
  border-radius: 4px;

  .tree-tab-item {
    width: 60px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
  }

  .active-tab {
    color: #fff;
    background: #4089f7;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #b5d2fe;
  }
}

.no-content {
  display: flex;
  justify-content: center;
}
</style>
